<template>
	<view class="page">
		<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color"
			mode="aspectFill"></image>
		<!-- @scroll="pagScroll" -->
		<z-paging ref="paging" bg-color="rgba(240, 240, 240,0)">
			<uv-navbar slot="top" bgColor="rgba(0,0,0,0)" autoBack :fixed="false" title="售后报修"></uv-navbar>

			<!-- 内容 -->
			<view class="content-box ios">
				<uv-form labelPosition="top" :model="formData" :rules="rules" ref="form" labelWidth="auto">
					<uv-form-item label="项目名称" prop="project_obj" borderBottom required @click="showSelect('projectPicker')">
						<uv-input :value="formData.project_obj.project_name" disabled disabledColor="#ffffff" placeholder="请选择报修项目"
							border="none"></uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-form-item label="现场对接联系电话" prop="scene_phone" borderBottom required>
						<uv-input v-model="formData.scene_phone" border="none" placeholder="请输入联系电话"></uv-input>
					</uv-form-item>
					<uv-form-item label="期望上门时间" prop="expected_doorstep_time" borderBottom required
						@click="showSelect('calendars')">
						<uv-input v-model="formData.expected_doorstep_time" disabled disabledColor="#ffffff" placeholder="请选择报修项目"
							border="none"></uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
					<uv-form-item label="报修内容" prop="problem_content" borderBottom required>
						<uv-textarea v-model="formData.problem_content" border="none" placeholder="请输入报修内容"
							:placeholderStyle="{fontSize: '13.5px', color: '#BFC4CC'}"
							:customStyle="{padding: `${this.textareaPadding}px`}"></uv-textarea>
					</uv-form-item>
					<uv-form-item label="图片/视频" prop="after_sales_file" borderBottom required>
						<uv-upload :fileList="formData.after_sales_file" multiple :maxCount="8" accept="media"
							@afterRead="afterRead" @delete="deletePic" width="110rpx" height="110rpx">
							<view class="upload-box">
								<view class="upload-item">
									<uv-icon name="plus" color="#DDE2EE" size="14"></uv-icon>
								</view>
							</view>
						</uv-upload>
					</uv-form-item>
					<uv-button type="primary" text="立即报修" customStyle="margin-top: 30px" @click="submit"></uv-button>
				</uv-form>
			</view>
		</z-paging>
		<!-- 项目列表 -->
		<uv-picker ref="projectPicker" :columns="projectList" keyName="project_name"
			@confirm="confirm($event, 'project')"></uv-picker>
		<!-- 期望上门时间 -->
		<uv-calendars ref="calendars" :startDate="startDate" :endDate="endDate" @confirm="confirm($event, 'calendars')" />
	</view>
</template>

<script>
	import {
		mobile,
	} from '@/uni_modules/uv-ui-tools/libs/function/test.js';
	import {
		timestampToDateFormat,
		getNextYearToday
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				textareaPadding: 0,
				projectList: [],
				startDate: '',
				endDate: '',
				formData: {
					project_obj: '',
					problem_content: '',
					scene_phone: '',
					expected_doorstep_time: '',
					after_sales_file: [],
				},
				rules: {
					project_obj: {
						validator: (rule, value, callback) => {
							if (value != '') {
								return true;
							} else {
								return false;
							}
						},
						required: true,
						message: '请选择项目名称',
						trigger: ['change']
					},
					problem_content: {
						required: true,
						message: '请输入报修内容',
						trigger: ['change']
					},
					scene_phone: {
						validator: (rule, value, callback) => {
							return mobile(value);
						},
						message: '请填写正确手机号',
						trigger: ['change']
					},
					expected_doorstep_time: {
						validator: (rule, value, callback) => {
							if (value) {
								return true;
							} else {
								return false;
							}
						},
						required: true,
						message: '请选择期望上门时间',
						trigger: ['change']
					},
					after_sales_file: {
						validator: (rule, value, callback) => {
							if (value.length > 0) {
								return true;
							} else {
								return false;
							}
						},
						message: '请选择图片/视频',
						trigger: ['change']
					},
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			this.formData.scene_phone = userInfo.phone;
			// 获取当前日期
			this.startDate = timestampToDateFormat(new Date().getTime())
			// 获取明年的今天
			this.endDate = getNextYearToday()

			const systemInfo = uni.getSystemInfoSync();
			const platform = systemInfo.platform;

			if (platform === 'ios') {
				this.textareaPadding = 0
			} else if (platform === 'android') {
				this.textareaPadding = 5
			} else {
				this.textareaPadding = 5
			}

			this.getDataList()
		},
		methods: {
			showSelect(type) {
				this.$refs[type].open()
			},
			confirm(e, type) {
				switch (type) {
					case 'project':
						this.formData.project_obj = e.value[0]
						this.$refs.form.validateField('project_obj');
						break
					case 'calendars':
						this.formData.expected_doorstep_time = e.fulldate
						this.$refs.form.validateField('expected_doorstep_time');
						break
				}
			},

			// 删除图片
			deletePic(event) {
				console.log(event);
				this.formData.after_sales_file.splice(event.index, 1)
			},
			// 新增图片
			afterRead(event) {
				event.file.map(item => {
					let obj = {
						url: item.url
					}
					this.formData.after_sales_file.push(obj)
				})
				console.log(event);
				this.$refs.form.validateField('after_sales_file');
			},

			submit() {
				let formData = this.formData;
				// console.log(formData)
				this.$refs.form.validate().then((res) => {
					uni.showLoading({
						mask: true,
						title: '信息提交中...'
					});
					// 上传图片/视频
					this.$upload(formData.after_sales_file).then((res) => {
						console.log(1111, {
							project_id: formData.project_obj.id,
							problem_content: formData.problem_content,
							scene_phone: formData.scene_phone,
							expected_doorstep_time: formData.expected_doorstep_time,
							after_sales_file: res.arrResult,
						});
						// 提交
						this.$Api.khAddAfterSales({
							project_id: formData.project_obj.id,
							problem_content: formData.problem_content,
							scene_phone: formData.scene_phone,
							expected_doorstep_time: formData.expected_doorstep_time,
							after_sales_file: res.arrResult,
						}).then(res => {
							console.log(res, '发起售后');
							uni.hideLoading();
							if (res.code == 200) {
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/repair/repair'
									})
								}, 300)
							}
							uni.showToast({
								title: res.code == 200 ? '操作成功' : res.message,
								icon: res.code == 200 ? 'success' : 'error'
							});
						})
					}).catch((err) => {
						uni.hideLoading();
					})


				}).catch((errors) => {});
			},
			// ---------------获取列表数据-------------------
			getDataList() {
				this.$Api.khAllowProject().then(res => {
					console.log(res, '售后项目列表');
					if (res.code == 200) {
						this.projectList = [res.data]
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>